<template>
  <div class="vanta_area" ref="Area" style="height: 100vh;width: 100vw">
    <!-- 头部区域 -->

    <Header style="height: 10vh ;width: 100vw"/>

    <div class="common-layout" style="height: 90vh">
      <el-container>
        <el-aside width="20vw" style="height: 90vh;background: #ffffff ; opacity: 0.8">
            <router-view/>
        </el-aside>

        <el-main style="height: 90vh;
             width: 80vw">
          <el-scrollbar ref="scrollbar" style="height: 100%">
            <el-row style="height: 90vh;
             width: 80vw;
             justify-content: center">
              <PersonArticleCard
                  v-for="(item,index) in dataList"
                  :key="index"
                  :title="item.title"
                  :post-time="item.postTime"
                  :summary="item.summary"
                  :is-elite="item.elite"
                  :article-id="item.articleId"
              ></PersonArticleCard>
            </el-row>
          </el-scrollbar>
        </el-main>

      </el-container>
    </div>
  </div>
</template>

<script setup>
import Header from "@/components/HomeNavigation/Header.vue";
import {onBeforeUnmount, onMounted, ref} from 'vue'
import {getWithToken} from "@/net/postAndGetMethodWithToken";
import PersonArticleCard from "@/components/Content/cardComponents/PersonArticleCard.vue";
import * as THREE from "three";
import CLOUDS  from 'vanta/dist/vanta.clouds.min'

const uid = ref('')
const dataList = ref([])

    getWithToken('/api/user/info',(data, code, message)=>{
        uid.value = data.uid
        getWithToken('/api/userall?uid='+uid.value,(data, code, message)=>{
            dataList.value = data
        })
    })

const Area=ref(null)

/**
 *因为在vue2中，是使用this.vantaEffect来创建指定的3d动画模板的
 *但是vue3 setup中是没有this，所以要另外创建一个
 **/
let vantaEffect=null;
//在两个生命周期钩子内创建vantaEffect
onMounted(()=>{
  vantaEffect=CLOUDS({
    el:Area.value,
    THREE:THREE,
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
  })
})

onBeforeUnmount(()=>{
  if(vantaEffect){
    vantaEffect.destroy()
  }
})

const scrollbar =ref()
</script>

<style scoped>
.scale-enter-active,
.scale-leave-active {
    transition: all 0.5s ease;
}
.scale-enter-from,
.scale-leave-to {
    opacity: 0;
    transform: scale(0.9);
}
</style>
